<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery随机图片瀑布流无限加载 - php中文网</title>

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      a,
      img {
        border: 0;
      }
      body {
        font: 12px/180% Arial, Helvetica, sans-serif, '新宋体';
      }
      /* container */
      #container {
        width: 940px;
        margin: 50px auto;
      }
      #container ul {
        width: 300px;
        list-style: none;
        float: left;
        margin-right: 20px;
      }
      #container ul li {
        margin-bottom: 20px;
      }
      #container ul li img {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul class="col">
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="2.jpg" alt="" /></li>
        <li><img src="3.jpg" alt="" /></li>
        <li>
          <img src="4.jpg" />
          <p>src=4.jpg</p>
        </li>
        <li>
          <img src="2.jpg" />
          <p>src=2.jpg</p>
        </li>
        <li>
          <img src="5.jpg" />
          <p>src=5.jpg</p>
        </li>
      </ul>
      <ul class="col">
        <li>
          <img src="3.jpg" />
          <p>src=3.jpg</p>
        </li>
        <li>
          <img src="3.jpg" />
          <p>src=3.jpg</p>
        </li>
        <li>
          <img src="4.jpg" />
          <p>src=4.jpg</p>
        </li>
        <li>
          <img src="2.jpg" />
          <p>src=2.jpg</p>
        </li>
        <li>
          <img src="6.jpg" />
          <p>src=6.jpg</p>
        </li>
        <li>
          <img src="6.jpg" />
          <p>src=6.jpg</p>
        </li>
        <li>
          <img src="6.jpg" />
          <p>src=6.jpg</p>
        </li>
        <li>
          <img src="3.jpg" />
          <p>src=3.jpg</p>
        </li>
        <li>
          <img src="1.jpg" />
          <p>src=1.jpg</p>
        </li>
      </ul>
      <ul class="col" style="margin-right: 0">
        <li>
          <img src="5.jpg" />
          <p>src=5.jpg</p>
        </li>
        <li>
          <img src="1.jpg" />
          <p>src=1.jpg</p>
        </li>
        <li>
          <img src="5.jpg" />
          <p>src=5.jpg</p>
        </li>
        <li>
          <img src="8.jpg" />
          <p>src=8.jpg</p>
        </li>
        <li>
          <img src="7.jpg" />
          <p>src=7.jpg</p>
        </li>
        <li>
          <img src="4.jpg" />
          <p>src=4.jpg</p>
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
      $(function () {
        //url data function dataType
        function loadMeinv() {
          var data = 0
          for (var i = 0; i < 9; i++) {
            //每次加载时模拟随机加载图片
            data = parseInt(Math.random() * 9)
            var html = ''
            html =
              '<li><img src = ' + data + '.jpg><p>src=' + data + '.jpg</p></li>'
            $minUl = getMinUl()
            $minUl.append(html)
          }
        }
        loadMeinv()
        $(window).on('scroll', function () {
          $minUl = getMinUl()
          if ($minUl.height() <= $(window).scrollTop() + $(window).height()) {
            //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
            loadMeinv()
          }
        })
        function getMinUl() {
          //每次获取最短的ul,将图片放到其后
          var $arrUl = $('#container .col')
          var $minUl = $arrUl.eq(0)
          $arrUl.each(function (index, elem) {
            if ($(elem).height() < $minUl.height()) {
              $minUl = $(elem)
            }
          })
          return $minUl
        }
      })
    </script>
  </body>
</html>
